<script setup lang="ts">
import { ref } from 'vue'
import { queryFactions } from '../../api/Faction'

const tableData = ref([])
const meta = ref({
  total: 0,
  page: 1,
  limit: 10,
})

const init = (limit: number, page: number) => {
  queryFactions(limit, page).then((resp) => {
    tableData.value = resp.data
    meta.value = resp.meta
  })
}

const handleSizeChange = (val: number) => {
  init(val, meta.value.page)
}

const handleCurrentChange = (val: number) => {
  init(meta.value.limit, val)
}

init(10, 1)
</script>

<template>
  <el-table
    :data="tableData"
    :border="true"
    style="width: 100%"
    show-overflow-tooltip
  >
    <el-table-column prop="symbol" label="标志" width="180" />
    <el-table-column prop="name" label="名称" width="200" />
    <el-table-column prop="headquarters" label="基地" width="120" />
    <el-table-column prop="isRecruiting" label="正在招募" width="100px">
      <template #default="scope">
        <el-tag type="success" v-if="scope.row.isRecruiting">是</el-tag>
        <el-tag type="danger" v-else>否</el-tag>
      </template>
    </el-table-column>
    <el-table-column prop="description" label="描述" />
  </el-table>
  <el-pagination
    v-model:current-page="meta.page"
    :page-size="meta.limit"
    size="small"
    :background="true"
    layout="total, prev, pager, next"
    :total="meta.total"
    @size-change="handleSizeChange"
    @current-change="handleCurrentChange"
  />
</template>

<style scoped></style>
